<template>
  <div>
      <!-- <myhead></myhead> -->
      <header class="top-bg">
      <div class="top-head">
        <ul class="nav-left">
          <li class="col-1">
            <router-link to="/">收藏鲜花网(hua.com)</router-link>
          </li>
          <li class="col-2 bg">
            <router-link to="/">关注微信</router-link>
            <div class="box">
              <img
                src="../../assets/images/componentsimg/wxguanjia_qrcode.png"
                alt=""
              />
              <p>扫码关注</p>
              <p>回复"礼物"更多惊喜!</p>
            </div>
          </li>
          <li class="col-3 bg">
            <router-link to="/">花礼网app</router-link>
            <div class="box">
              <img
                src="../../assets/images/componentsimg/app_download_qrcode.png"
                alt=""
              />
              <p>新人专享100元APP礼包</p>
            </div>
          </li>
        </ul>
        <ul class="nav-right">
          <li>
            <router-link to="/login">你好，请登录</router-link> &nbsp;
            <router-link to="/reginster">注册</router-link>
          </li>
          <li class="line">|</li>
          <li>
            <router-link to="/detail">订单详情</router-link>
          </li>
          <li class="line">|</li>
          <li class="bg">
            <router-link to="/">我的花礼</router-link>
          </li>
          <li class="line">|</li>
          <li class="bg">
            <router-link to="/"
              >客户服务
              <span class="el-icon-caret-bottom"></span>
            </router-link>
            <div class="box">
              <p><router-link to="/">在线付款</router-link></p>
              <p><router-link to="/">帮助中心</router-link></p>
              <p><router-link to="/">售后服务</router-link></p>
              <p><router-link to="/">配送范围</router-link></p>
              <p><router-link to="/">留言反馈</router-link></p>
            </div>
          </li>
          <li class="line">|</li>
          <li class="bg gwc">
            <router-link to="/">
              <span class="che"></span>
              购物车
              <span class="leng">(0)</span>
              <span class="el-icon-caret-bottom"></span>
            </router-link>
            <div class="box">
              <p>您的购物车中没有商品，先去选购吧!</p>
            </div>
          </li>
          <li class="line">|</li>
          <li>
            <router-link to="/gifts">特色礼品生日礼物</router-link>
          </li>
        </ul>
      </div>
    </header>
    <header class="content-bg">
      <div class="logo">
        <router-link to="/">
          <img src="../../assets/images/componentsimg/pc_hualogo.png" alt="" />
        </router-link>
      </div>
      
      <div class="hone">
        <div><span class="sj"></span> 400-889-8188</div>
        <div>|</div>
        <div>
          <router-link to="/"><span class="kf"></span>在线客服</router-link>
        </div>
      </div>
    </header>
    <!-- ---- -->
    <div class="bg-con">
      <div class="content">
        <div class="content_1">
          <h3>收货人信息</h3>
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
            label-position="left"
          >
            <el-form-item label="收货人" prop="name">
              <el-input
                v-model="ruleForm.name"
                placeholder="请输入收货人姓名"
              ></el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="iphone">
              <el-input
                v-model="ruleForm.iphone"
                placeholder="请输入收货人的手机号码"
              ></el-input>
            </el-form-item>
            <el-form-item label="所在地区" prop="region">
              <el-select v-model="ruleForm.region" placeholder="请选择省">
                <el-option label="北京" value="beijing"></el-option>
                <el-option label="上海" value="shanghai"></el-option>
                <el-option label="广东" value="guangdong"></el-option>
                <el-option label="福建" value="fujian"></el-option>
                <el-option label="四川" value="sichuan"></el-option>
              </el-select>
              <el-select v-model="ruleForm.region" placeholder="请选择市">
                <el-option label="深圳" value="shenzhen"></el-option>
                <el-option label="重庆" value="chongqing"></el-option>
                <el-option label="福州" value="fuzhou"></el-option>
                <el-option label="上海" value="shanghai"></el-option>
                <el-option label="成都" value="chengdu"></el-option>
              </el-select>
              <el-select v-model="ruleForm.region" placeholder="请选择区/县">
                <el-option label="北京" value="beijing"></el-option>
                <el-option label="上海" value="shanghai"></el-option>
                <el-option label="广东" value="guangdong"></el-option>
                <el-option label="福建" value="fujian"></el-option>
                <el-option label="四川" value="sichuan"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="详细地址" prop="address">
              <el-input
                v-model="ruleForm.address"
                placeholder="请输入收货人详细地址"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="content_1">
          <h3>订购人信息</h3>
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
            label-position="left"
          >
            <el-form-item label="订购人姓名" prop="dgname">
              <el-input
                v-model="ruleForm.dgname"
                placeholder="请输入订购人姓名"
              ></el-input>
            </el-form-item>
            <el-form-item label="订购人手机" prop="dgiphone">
              <el-input
                v-model="ruleForm.dgiphone"
                placeholder="请输入订购人手机号码"
              ></el-input>
            </el-form-item>
          </el-form>
          <p>
            <a href="#">无大陆手机号 > ></a>
          </p>
        </div>

        <div class="content_1">
          <h3>送达日期</h3>
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
            label-position="left"
          >
            <el-form-item label="送达日期" prop="sddate">
              <div class="block">
                <el-date-picker
                  v-model="value2"
                  align="right"
                  type="date"
                  placeholder="选择送达日期"
                  :picker-options="pickerOptions"
                >
                </el-date-picker>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <div class="content_1">
          <h3>贺卡留言</h3>
          <div class="hkly">
            <div>
              <el-input
                type="textarea"
                placeholder="写下您的祝福语，可附上署名(200字以内)"
                v-model="textarea"
                maxlength="200"
                show-word-limit
              >
              </el-input>
            </div>
            <div>
              <el-tabs type="border-card" class="">
                <el-tab-pane label="生日快乐">
                  1.亲爱的，生日快乐，我只想唯一霸道的拥有着一个你。给我开开心心的一辈子。生日快乐！my
                  love
                  2.今天是你的生日，你最大！在这个属于你最灿烂的日子里，我诚挚的送上一句最古老但又是最新鲜出炉的生日祝福：生日快乐！健康平安！
                  3.亲爱的~~生日快乐生日快乐生日快乐~爱你么么哒——给全世界最温柔最可爱的小姐姐~
                  4.感谢上苍在今天给了我一个特别的礼物，就是你。长长的人生旅程，有你相伴是我一生的幸福。祝你生日快乐!
                  5.在这个特别的日子里，我没有别的话，只想你知道，每年今天，你都会收到我的祝福，感受到我的爱，永远的爱!
                  6.有些事我每天都挂念，但只能一年说一次。迟到了，对不起。生日快乐！
                  7.特别的日子，特别的祝福，送给生日的你：希望长大一岁的你更成熟，更顺利，更漂亮！年年18！
                  8.你虽不在我身旁可我从未将你遗忘…做你想做的事，去你想去的地方，爱你想爱的人，追求你想追求的梦想，亲爱的朋友，祝你生日快乐！
                  9.简单的一句话语，一个祝福，寄给一个远在他乡的你。虽然不常联系，但是不曾忘记。祝你生日快乐，更愿你天天都有个好心情!
                  10.您的生日让我想起您对我的体贴，还有您为我所做的一切。我只希望您所给予我的幸福，我将同样回报给您。祝福您事事顺心，幸福无边!
                  11.妈妈，生日快乐！真希望能有语言能表达我们的谢意，感谢您每日操持家务及给予我们的帮助。愿您在今后的岁月中永远快乐、健康！
                </el-tab-pane>
                <el-tab-pane label="送恋人">
                  1.遇到你我感到很幸福，但是我不能成为世界上最幸福的人，因为我们在一起，我要让你成为世界上最幸福的人。
                  2.有些情感，无需多么华美，只是简单的遇见，简单的想念，哪怕它只是简单到：拉着你的手，迎着风走！
                  3.我多么希望，有一个门口，早晨，阳光照在草上，我们站着，扶着自己的门扇，门很低，但太阳是明亮的。草在结它的种子，风在摇它的叶子，我们站着，不说话，就十分美好。
                  4.如果世界上曾经有那个人出现过，其他人都会变成将就，而我，不愿意将就。没遇到爱时，它是一个遥不可及的幻梦，遇到爱之后，它是一份可以被触碰的美好，不善言辞的我，爱上了你后，突然有很多话想说给你听..
                  5.我还是喜欢你，就像风追随云，我好想追到你，又怕吹散了你，春风十里，不如你。
                  6.亲爱的：在这特别的日子，我只能用心去默默地想你、爱你。只想告诉你：永远深爱着你，希望你每年的今天都能过一个快乐的生日。
                  7.为你的幸福而高兴，并且我愿付出一切让你更幸福。任何时候为爱你付出的一切都不是白白浪费。
                  8.爱你是我一生无悔的决定，漫天星星都是我注视你的眼睛。无论结局如何，我都知道：此生最爱是你！
                  9.时间会慢慢地让你了解，一个外表很冷漠又很怕羞的人，他的心却充满了对你的爱。
                  10.我的错误，划破了你的心。如今，我用我真挚的爱弥补你的伤口，请接受我的诚意。
                </el-tab-pane>
                <el-tab-pane label="送朋友">
                  1.一切的不顺心都是纸老虎！希望你开心！
                  2.不管世界尽头多寂寞，你的身边一定有我
                  3.不求同年同月同日生，但求同年同月同日疯
                  4.最深的爱，总是风雨兼程；最浓的情，总是冷暖与共；最懂的人，才是最暖的伴。朋友，感恩有你。
                  5.不是所有人都能掏心掏肺，不是所有的路过都是风景，不是所有的擦肩都是过客。但无论是对朋友还是爱人，只要是在乎我的，我都会加倍珍惜！
                  6.吾在茫茫人海遇见了你，能成为知己，得知，我的幸运！
                  7.朋友就是那种不需要时刻想起，永远也不会忘记的人，当我需要的时候，还没有讲，你已来到我的身边。不过有你的做伴使我不再感到渺小和孤独。
                  8.无私无邪无猜无疑的友情无价，你是我买不到的奢华
                  9.人逢知己千杯少，难得在漫漫人生路上能认识你，在一起走过的日子，非常的感谢你给我的帮助，我始终不能忘记我们友谊，不能忘记我们在一起的点点滴滴，很想说有你真好，祝福你，我的朋友。
                  10.这些日子你过得还好吗？也许忙碌改变了我们的生活，但我永远珍惜我们的情谊。
                </el-tab-pane>
                <el-tab-pane label="送长辈">
                  1.引一缕清风，为妈妈带去轻松；采一缕阳光，为妈妈送去芬芳；掬一捧清水，为妈妈消去疲惫；送一束鲜花，为妈妈奉上祝福。祝妈妈生日快乐！
                  2.美丽动人可爱迷人的妈妈：生日快乐！青春永驻！虽然不能陪伴在你身边，我的心一直陪伴着你，我爱你，妈妈。
                  3.“洗衣做饭忙不完，每日忙碌不着闲，历经风霜添白发，勤劳持家不知烦”。作为儿子女儿的我们，深知您每天的辛苦忙碌，但作为儿子女儿的我们，同样要给您幸福，祝您生日快乐，幸福万年长。
                  4.从一个城市到另一个城市，只有靠自己努力。学会长大，学会承受，学会哭过之后，还可以微笑地拥抱爸爸妈妈。因为你们一直是我的守护神！让我走到哪里都不会怕！
                  5.谢谢您做的一切，双手撑起我们的家，总是竭尽所有把最好的给我们。不要再为我们而担心啦，你牵挂的孩子长大了。
                  6.岁月总是越来越短，生日总是越来越快。留不住的时光使您走向人生的至善，留得住的贺卡捎去的是我深深的怀念。真心希望晚辈的祝福带给您欢乐！
                  7.听说神无法无处不在，所以创造了妈妈。即使到了妈妈的年龄，妈妈的妈妈仍然是妈妈的守护神。妈妈这个词，只是叫一叫，也觉得喉间哽咽。妈妈，最有力量的名字；妈妈，祝你永远年轻。
                  8.父爱如山，父爱无言，您总是微笑着担起了整个家庭。在我心中，您是全天下最好的爸爸。
                  9.您用优美的年轮，编成一册散发油墨清香的日历；年年，我都会在日历的这一天上，用深情的想念，祝福您的生日。
                  10.亲爱的妈妈：您曾用您坚实的臂弯为我撑起一片蓝天；而今，我也要用我日益丰满的羽翼为您遮挡风雨。妈妈，我永远爱您！生日快乐！祝我的美女妈妈越来越青春，身体健康，瘦成闪电，未来的我可以每个假期带你出去纵横~
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>
        </div>
        <div class="content_1">
          <ul>
            <li>
              <el-radio v-model="radio" label="1">备注</el-radio>
            </li>
            <li>
              <el-radio v-model="radio" label="2">发票</el-radio>
            </li>
            <li>
              <el-radio v-model="radio" label="3">使用优惠券</el-radio>
            </li>
          </ul>
        </div>
        <div class="content_1">
          <h3>核对购物清单</h3>
          <div class="gwqd"></div>
          <div class="js">
            <div class="psdz lf">
              <p>配送至:山西太原市</p>
              <p><span>张学友</span><span>13891909574</span></p>
            </div>
            <div class="psdz ri">
              <p class="text">
                共<span class="num">1</span>件商品，总商品金额:
                <span class="zj">￥669</span>
              </p>
              <p>
                应付:<span class="yf">￥669</span>
                <button class="btn">提交订单</button>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <myfoot></myfoot>

  </div>
</template>

<script>
import myfoot from "../../components/Footer/footer.vue";
import myhead from "../../components/Header/header.vue";
export default {
  components: { myfoot,myhead },
  data() {
    return {
      radio: "1",
      ruleForm: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        iphone: [
          { required: true, message: "请输入收货人手机号码", trigger: "blur" },
        ],
        address: [
          { required: true, message: "请输入收货人详细地址", trigger: "blur" },
        ],
        dgname: [
          { required: true, message: "请输入订购人姓名", trigger: "blur" },
        ],
        dgiphone: [
          { required: true, message: "请输入订购人手机号码", trigger: "blur" },
        ],
        dgiphone: [
          { required: true, message: "请选择送达日期", trigger: "blur" },
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change",
          },
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change",
          },
        ],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" },
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "上午(08:30~12:00)",
          },
          {
            text: "下午(12:00~17:00)",
          },
          {
            text: "晚上(17:00~20:30)",
          },
          {
            text: "尽快送出",
          },
          {
            text: "定时",
          },
        ],
      },
      activeName: "first",
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style lang="less" scoped>
  .top-bg {
    background: #f2f2f2;
    border-bottom: 1px solid gainsboro;
  }
  .top-head {
    width: 1200px;
    height: 35px;
    line-height: 35px;
    margin: 0 auto;
  }

a {
  color: #737373;
  font-size: 12px;
}
.box {
  position: absolute;
  left: -1px;
  top: 100%;
  z-index: 10;
  border: 1px solid gainsboro;
  border-top: none;
  width: 160px;
  line-height: 18px;
  font-size: 12px;
  text-align: center;
  padding-top: 20px;
  display: none;
  background: #fff;
  img {
    width: 124px;
    height: 124px;
  }
  p {
    margin: 5px 0;
  }
}
.nav-right .box {
  width: 100%;
  padding: 0;
}
.gwc .box {
  width: 320px;
  padding: 15px;
  left: -213px;
  line-height: 70px;
}
a:hover {
  color: #fe7a24;
  text-decoration: none;
}
li:hover > a {
  text-decoration: none;
  color: #fe7a24;
}
.nav-left {
  float: left;
  li {
    float: left;
    padding: 0 10px;
    list-style: none;
    &::before {
      margin-right: 5px;
      width: 20px;
      height: 20px;
      display: inline-block;
      content: "";
      background: url(../../assets/images/componentsimg/common_z.png) no-repeat;
      vertical-align: middle;
    }
    &.col-1::before {
      background-position: -2px -320px;
    }
    &.col-2::before {
      background-position: -376px -135px;
    }
    &.col-3::before {
      background-position: -295px -174px;
    }
  }
}
.nav-right {
  float: right;
  li {
    float: left;
    list-style: none;
    padding: 0 5px;
    .che {
      width: 24px;
      height: 24px;
      background: url(../../assets/images/componentsimg/common_z.png) -340px -284px
        no-repeat;
      display: inline-block;
      vertical-align: middle;
    }
    .leng {
      color: #fe7a24;
    }
    .el-icon-caret-bottom {
      color: #d9d9d9;
    }
    &:hover .el-icon-caret-bottom {
      color: #fe7a24;
    }
  }
  .line {
    color: #d9d9d9;
    padding: 0;
  }
}
li {
  border: 1px solid transparent;
  position: relative;
  box-sizing: border-box;
}
li.bg:hover {
  background: #fff;
  border: 1px solid gainsboro;
  border-bottom: none;
  box-sizing: border-box;
}
li.bg:hover > .box {
  display: block;
}
// logo
.content-bg {
  width: 1200px;
  height: 120px;
  // line-height: 120px;
  padding-top: 30px;
  margin: 0 auto;
  overflow: hidden;
  div {
    float: left;
  }
  .logo {
    width: 500px;
  }
  .seach {
    width: 300px;
    height: 34px;
    input {
      border: 1px solid #fe7a24;
      padding: 3px 5px;
      outline-style: none;
    }
    button {
      background: #fe7a24;
      border: 1px solid #fe7a24;
      padding: 3px 20px;
      color: #fff;
      outline-style: none;
    }
  }
  .hone {
    margin-left: 100px;
    float: right;
    div {
      margin: 0 10px;
      font-size: 12px;
      color: gray;
    }
    span {
      width: 25px;
      height: 25px;
      display: inline-block;
      background: url(../../assets/images/componentsimg/common_z.png) no-repeat;
      vertical-align: middle;
      margin-right: 5px;
    }
    .sj {
      background-position: -382px -49px;
    }
    .kf {
      background-position: -297px -133px;
    }
  }
}

// .....
li {
  list-style: none;
  margin-bottom: 10px;
}
.bg-con {
  background-color: #f3f5f7;
  padding-top: 30px;
  padding-bottom: 100px;
}
.content {
  width: 1200px;
  margin: 0 auto;
//   margin-bottom: 100px;
  background-color: white;
  border-radius: 10px;
  //   padding: 30px;
}
.content_1 {
  border-bottom: 1px solid #f5f6f8;
  // margin-bottom: 4px;
  padding: 30px;
  p {
    margin-left: 100px;
    a {
      color: black;
    }
  }
}
.el-form-item__content {
  width: 382px;
}
.el-input {
  width: 382px;
}
.el-select {
  width: 125px;
}
.el-textarea {
  width: 483px;
  // height: 160px;
  .el-textarea__inner {
    height: 160px;
  }
}
.hkly {
  display: flex;
  justify-content: space-between;
}
.el-tab-pane {
  height: 200px;
  overflow: hidden;
}
.gwqd {
  width: 1120px;
  height: 100px;
  background-color: #f7f9fa;
}
.js {
  width: 1120px;
  height: 100px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
.psdz {
  text-align: left;
  .text {
    text-align: right;
  }
  p {
    width: 100%;
    text-align: left;
    margin-left: 0px;
  }
}
.num {
  color: #ff734c;
}
.zj {
  font-size: 16px;
  font-weight: bold;
}
.yf {
  font-size: 18px;
  color: #ff734c;
  font-weight: bold;
}
.btn {
  width: 180px;
  height: 40px;
  color: white;
  background-color: #ff734c;
  border-radius: 50px;
  margin-left: 30px;
}

  
</style>